<template>
  <view class="container">
    <view class="box">
      <view class="register"> 注册 </view>
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="手机号" name="mobile" labelWidth="60">
          <uni-easyinput
            type="text"
            v-model="formData.mobile"
            placeholder="请输入账号"
          />
        </uni-forms-item>
      </uni-forms>
      <button @tap="submit" class="btn">登录</button>
    </view>
  </view>
</template>

<script>
import { miniLogin } from "@/api/index";
export default {
  data() {
    return {
      formData: {
        mobile: "",
      },
      rules: {
        mobile: {
          rules: [
            {
              required: true,
              errorMessage: "请输入手机号",
            },
          ],
        },
      },
      js_code: "",
    };
  },
  onLoad() {},
  methods: {
    submit() {
      const that = this;
      this.$refs.form
        .validate()
        .then(() => {
          wx.login({
            success(res) {
              if (res.code) {
                miniLogin({
                  mobile: that.formData.mobile,
                  js_code: res.code,
                })
                  .then((res) => {
                    if (res.code === 0) {
                      console.log(
                        "res.data.open_id",
                        res.data.open_id,
                        res.data
                      );
                      uni.setStorageSync("open_id", res.data.open_id);
                      uni.navigateBack();
                    }
                  })
                  .catch((err) => {
                    console.log("错误信息：", err);
                  });
              } else {
                console.log("登录失败！" + res.errMsg);
              }
            },
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>
<style scoped>
.container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("https://red-1259268558.cos.ap-shanghai.myqcloud.com/WX20240826-174224.png");
}
.box {
  width: 90%;
  border: solid 1px #ccc6c6;
  padding: 80rpx 60rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  background-color: #f9f9f9;
}
.btn {
  width: 260rpx;
  font-size: 28rpx;
  background-color: #fff;
}
.register {
  margin-bottom: 50rpx;
  text-align: center;
  font-size: 36rpx;
}
</style>
